<template>
	<view class="bill-time">
		<uni-popup ref="popup" type="bottom">
			<view class="top-btn"><text @click="selectTime">确定</text></view>
			<picker-view :indicator-style="indicatorStyle" :value="value" @change="bindChange" class="picker-view">
				<picker-view-column>
					<view class="item" v-for="(item, index) in years" :key="index">{{ item }}年</view>
				</picker-view-column>
				<picker-view-column>
					<view class="item" v-for="(item, index) in months" :key="index">{{ item }}月</view>
				</picker-view-column>
			</picker-view>
		</uni-popup>
	</view>
</template>

<script>
export default {
	data() {
		const date = new Date();
		const years = [];
		const year = date.getFullYear();
		const months = [];
		const month = date.getMonth() + 1;
		for (let i = 2010; i <= date.getFullYear(); i++) {
			years.push(i);
		}
		for (let i = 1; i <= 12; i++) {
			months.push(i);
		}
		return {
			value: [year, month - 1],
			years,
			year,
			months,
			month,
			indicatorStyle: `height: 50px;`
		};
	},
	methods: {
		open() {
			this.$refs.popup.open('bottom');
		},
		close() {
			this.$refs.popup.close();
		},
		// 改变时间
		bindChange(e) {
			const val = e.detail.value;
			this.year = this.years[val[0]];
			this.month = this.months[val[1]];
		},
		// 选择时间
		selectTime(){
			this.$emit('time', [this.year, this.month])
		}
	}
};
</script>

<style scoped lang="scss">
.top-btn {
	height: 100rpx;
	background: #ffffff;
	text-align: right;
	color: #007aff;
	line-height: 100rpx;
	padding: 0 40rpx;
	box-sizing: border-box;
}
.picker-view {
	width: 750rpx;
	height: 600rpx;
	background: #ffffff;
}
.item {
	height: 50px;
	align-items: center;
	justify-content: center;
	text-align: center;
}
</style>
